<template>
<div class=" publicBox" id="sysConfig">

<div class="boxItem " id="publicSearch">
<el-form ref="form" :inline="true"  class="demo-form-inline">
  <el-row>
      <el-form-item>
        <p class="iconfont icon-juxing"></p>
        <p class="up_text">运营城市配置</p>  
       </el-form-item>
  </el-row>

<el-row class="juxing">
   <el-tag
     v-for="item in cityArray"
     :key="item.id"
     >
     {{item.name}}
   </el-tag>


  <span class="el-tag addFlag" v-if="flag!==0" @click="addTag(0)">+</span>
  <span class="pubClearfix"    v-if="flag===0">
    <el-input v-model="eqname" placeholder="请输入运营城市配置"></el-input>
    <span class="btn_p" @click="preservation_s(1,eqname)">保存</span>
  </span>
</el-row>




  <el-row>
      <el-form-item>
        <p class="iconfont icon-juxing"></p>
        <p class="up_text">设备类型配置</p>  
       </el-form-item>
  </el-row>
<el-row class="juxing">
   <el-tag
     v-for="item in equipment"
     :key="item.id"
     >
     {{item.name}}
   </el-tag>
    <span class="el-tag addFlag"  v-if="flag!==1" @click="addTag(1)">+</span>
    <span class="pubClearfix"     v-if="flag===1">
      <el-input v-model="eqname" placeholder="请输入设备类型配置"></el-input>
      <span class="btn_p" @click="preservation_s(2,eqname)">保存</span>
    </span>
</el-row>

<el-row>
      <el-form-item>
        <p class="iconfont icon-juxing"></p>
        <p class="up_text">设备品牌配置</p>  
       </el-form-item>
  </el-row>
<el-row class="juxing">
   <el-tag
     v-for="item in brandArray"
     :key="item.id"
     >
     {{item.name}}
   </el-tag>
    <span class="el-tag addFlag"  v-if="flag!==2" @click="addTag(2)">+</span>
    <span class="pubClearfix"     v-if="flag===2">
      <el-input v-model="brandName" placeholder="请输入设备品牌配置"></el-input>
      <span class="btn_p" @click="preservation_s(3,brandName)">保存</span>
    </span>
</el-row>


</el-form>
</div>
         
  </div>
</template>

<script>
import * as API from "@api/system.js"

export default {
  components: {
  },
  data() {
    return {
      inputValue:"",
      inputVisible:false,
      flag:"",
      cityname:'',
      eqname:"",
      brandName:"",
      cityArray:[],  //城市配置数据
      equipment:[],  //设备配置数据
      brandArray:[]   //品牌配置
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
    addTag(index){
       this.flag=index      
    },
    closeTags(){
        this.flag=""
        this.cityname=""
        this.eqname=""
        this.brandName=""
    },
    async preservation_s(index,name){         //0代表城市配置   1代表设备配置  2代表品牌配置
          if(name==""){
            this.$message.error({message:"内容不能为空"})
            return
          }
          let params={type:index,name:name}
          API.addSysConfig(params).then(res=>{
                if(res.IsPositive){
                  this.$message.success({message:"添加成功"})
                  this.init().then(res=>{
                    this.closeTags()
                  })
                }else{
                  this.$message.error({message:res.ErrorCode})
                }
          })
              
    },
    async init(flag){
           Promise.all([this.$getDeviceType(1,true),
                        this.$getDeviceType(2,true),
                        this.$getDeviceType(3,true)]
                      ).then(res=>{
                        this.cityArray=res[0]
                        this.equipment=res[1]
                        this.brandArray=res[2]
                      })
           return ""
    }


  },
  created() {
           this.init()
  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' >
@import "../../styles/less/public.less";
  #sysConfig{
    .icon-juxing{
      color: #3691FF;
      display: inline-block;
    }
    .up_text{
      display: inline-block;
      font-size: 20px;
    }
    .juxing{
      width: 1280px;
      background-color: #F2F2F2;
      padding: 16px 13px 0 13px;
      display: inline-block;
      overflow: hidden;
      .el-tag{
        margin-right: 20px;
        height: 36px;
        line-height: 36px;
        padding: 0 16px;
        background: white;
        color: rgba(16, 16, 16, 1);
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 255, 255, 0);
        cursor: pointer;
        font-size: 18px;
        border-radius: 50px;
        margin-bottom: 16px;
      }
    .addFlag{
      width: 96px;
      text-align: center;
      color: white;
      background-color: rgba(255, 152, 0, 1);
    }
    }
    .in_btn{
      display: inline-block;
    }
      .el-input{
        width: 200px;
        .el-input__inner{
          height: 36px;
          width: 200px;
          border-top-left-radius: 50px;
          border-bottom-left-radius: 50px;
          border-right: none;
        }
      }
      .btn_p{
       border: 1px solid #617ADA;
       border-top-right-radius: 50px;
       border-bottom-right-radius: 50px;
       padding: 9px 10px;
       background-color: #617ADA;
       border-left: none;
       z-index: 9;
       cursor: pointer;
       position: relative;
       left: -3px;
       top: 0px;
      }
  }
</style>